{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/heatmap.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body style=&quot;margin:0;padding:0&quot;&gt; &lt;div id=&quot;container&quot; style=&quot;&quot;&gt;Loading....&lt;/div&gt; &lt;script&gt; $(function(){ Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}}); var option = {&quot;drilldown&quot;: {}, &quot;yAxis&quot;: {&quot;categories&quot;: [&quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;]}, &quot;legend&quot;: {&quot;verticalAlign&quot;: &quot;top&quot;, &quot;layout&quot;: &quot;vertical&quot;, &quot;align&quot;: &quot;right&quot;, &quot;y&quot;: 25, &quot;margin&quot;: 0, &quot;symbolHeight&quot;: 280}, &quot;loading&quot;: {}, &quot;colorAxis&quot;: {&quot;maxColor&quot;: &quot;#7CB5EC&quot;, &quot;minColor&quot;: &quot;#FFFFFF&quot;, &quot;min&quot;: 0}, &quot;plotOptions&quot;: {}, &quot;exporting&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;Sales per employee per weekday&quot;}, &quot;series&quot;: {}, &quot;tooltip&quot;: {&quot;formatter&quot;: function () {return &#x27;&lt;b&gt;&#x27; + this.series.xAxis.categories[this.point.x] + &#x27;&lt;/b&gt; sold &lt;br&gt;&lt;b&gt;&#x27; +this.point.value + &#x27;&lt;/b&gt; items on &lt;br&gt;&lt;b&gt;&#x27; + this.series.yAxis.categories[this.point.y] + &#x27;&lt;/b&gt;&#x27;;}}, &quot;xAxis&quot;: {&quot;categories&quot;: [&quot;Alexander&quot;, &quot;Marie&quot;, &quot;Maximilian&quot;, &quot;Sophia&quot;, &quot;Lukas&quot;, &quot;Maria&quot;, &quot;Leon&quot;, &quot;Anna&quot;, &quot;Tim&quot;, &quot;Laura&quot;]}, &quot;pane&quot;: {}, &quot;subtitle&quot;: {}, &quot;labels&quot;: {}, &quot;chart&quot;: {&quot;plotBorderWidth&quot;: 1, &quot;marginBottom&quot;: 80, &quot;marginTop&quot;: 40, &quot;type&quot;: &quot;heatmap&quot;, &quot;renderTo&quot;: &quot;container&quot;}, &quot;navigation&quot;: {}}; var data = [{&quot;type&quot;: &quot;heatmap&quot;, &quot;name&quot;: &quot;Series 1&quot;, &quot;dataLabels&quot;: {&quot;enabled&quot;: true, &quot;color&quot;: &quot;#000000&quot;}, &quot;data&quot;: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]], &quot;borderWidth&quot;: 1}]; option.series = data; var chart = new Highcharts.Chart(option); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;\" height=520 width=820></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x10c4ce080>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# -*- coding: utf-8 -*-\n",
    "\"\"\"\n",
    "Highcharts Demos\n",
    "Heatmap: http://www.highcharts.com/demo/heatmap\n",
    "\"\"\"\n",
    "from highcharts import Highchart\n",
    "H = Highchart()\n",
    "\n",
    "data = [\n",
    "    [0, 0, 10],\n",
    "    [0, 1, 19],\n",
    "    [0, 2, 8],\n",
    "    [0, 3, 24],\n",
    "    [0, 4, 67],\n",
    "    [1, 0, 92],\n",
    "    [1, 1, 58],\n",
    "    [1, 2, 78],\n",
    "    [1, 3, 117],\n",
    "    [1, 4, 48],\n",
    "    [2, 0, 35],\n",
    "    [2, 1, 15],\n",
    "    [2, 2, 123],\n",
    "    [2, 3, 64],\n",
    "    [2, 4, 52],\n",
    "    [3, 0, 72],\n",
    "    [3, 1, 132],\n",
    "    [3, 2, 114],\n",
    "    [3, 3, 19],\n",
    "    [3, 4, 16],\n",
    "    [4, 0, 38],\n",
    "    [4, 1, 5],\n",
    "    [4, 2, 8],\n",
    "    [4, 3, 117],\n",
    "    [4, 4, 115],\n",
    "    [5, 0, 88],\n",
    "    [5, 1, 32],\n",
    "    [5, 2, 12],\n",
    "    [5, 3, 6],\n",
    "    [5, 4, 120],\n",
    "    [6, 0, 13],\n",
    "    [6, 1, 44],\n",
    "    [6, 2, 88],\n",
    "    [6, 3, 98],\n",
    "    [6, 4, 96],\n",
    "    [7, 0, 31],\n",
    "    [7, 1, 1],\n",
    "    [7, 2, 82],\n",
    "    [7, 3, 32],\n",
    "    [7, 4, 30],\n",
    "    [8, 0, 85],\n",
    "    [8, 1, 97],\n",
    "    [8, 2, 123],\n",
    "    [8, 3, 64],\n",
    "    [8, 4, 84],\n",
    "    [9, 0, 47],\n",
    "    [9, 1, 114],\n",
    "    [9, 2, 31],\n",
    "    [9, 3, 48],\n",
    "    [9, 4, 91]\n",
    "]\n",
    "\n",
    "H.add_data_set(data, series_type='heatmap', borderWidth=1, dataLabels={\n",
    "    'enabled': True,\n",
    "    'color': '#000000'\n",
    "})\n",
    "\n",
    "H.set_options('chart', {\n",
    "    'type': 'heatmap',\n",
    "    'marginTop': 40,\n",
    "    'marginBottom': 80,\n",
    "    'plotBorderWidth': 1\n",
    "})\n",
    "\n",
    "H.set_options('xAxis', {\n",
    "    'categories': \n",
    "        ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']\n",
    "})\n",
    "\n",
    "H.set_options('yAxis', {\n",
    "    'categories': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n",
    "    'title': None\n",
    "})\n",
    "\n",
    "H.set_options('title', {\n",
    "    'text': \"Sales per employee per weekday\"\n",
    "})\n",
    "\n",
    "H.set_options('colorAxis', {\n",
    "    'min': 0,\n",
    "    'minColor': '#FFFFFF',\n",
    "    'maxColor': '#7CB5EC'\n",
    "})\n",
    "\n",
    "H.set_options('legend', {\n",
    "    'align': 'right',\n",
    "    'layout': 'vertical',\n",
    "    'margin': 0,\n",
    "    'verticalAlign': 'top',\n",
    "    'y': 25,\n",
    "    'symbolHeight': 280\n",
    "})\n",
    "\n",
    "H.set_options('tooltip', {\n",
    "    'formatter': \"function () {\" + \n",
    "                \"return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +\" +\n",
    "                    \"this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';\" +\n",
    "            \"}\"\n",
    "})\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}
